* {
  margin: 0;
  padding: 0;
}



.slide {
  height: 110px;
  width: 2px;
  background: red;
  position: relative;
  /* transform: rotateZ(90deg); */
}

.slide.horizontal {
  transform: rotateZ(-90deg);
}

.left,
.right {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 10px;
  background: green;
}

.slide.horizontal .text {
  transform: rotateZ(90deg);

}

.text {
  position: absolute;
  right: 110%;
  width: 20px;
  height: 20px;
  background: #333;
  color: #fff;
  font-size: 12px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* transform: rotateZ(-90deg); */

}

.left {
  top: 50px;
}

.right {
  top: 100px;
}